<template>
	<view class="page">
		<PageHeader :showPlaceHolder="false" customTitle="商品列表"></PageHeader>
		<view class="page-content">
			<view class="ui-multilevel-header">
				<fui-search-bar radius="36" paddingTb="22" :paddingLr="36" placeholder="请输入商品名称进行检索" :isLeft="true"
					searchText="" :cancel="false" @input="search">
				</fui-search-bar>
			</view>
			<CardComponent class="card" :showTitle="false" :showImage="false">
				<template #default>
					<view class="">
						<fui-radio-group v-if="isRadio" name="radio" v-model="radioValue">
							<view class="fui-list__item" v-for='item in listData' :key="item.id">
								<view class="item-row">
									<view class="select-box">
										<fui-radio :scaleRatio='0.8' :value="filterItem(item)"></fui-radio>
									</view>
									<image class=" img" :src="item.sliderPicUrls[0]" mode=""></image>
									<view class="item-text">
										<text>{{item.name}}</text>
									</view>
								</view>
								<view class="line-box">
									<view class="item-line">
									</view>
								</view>
							</view>
						</fui-radio-group>

						<fui-checkbox-group v-else name="checkbox" v-model="checkValue" @change="checkChange">
							<view class="fui-list__item" v-for='item in listData' :key="item.id">
								<view class="item-row">
									<view class="select-box">
										<fui-checkbox :scaleRatio='0.8' :value="item.id.toString()"></fui-checkbox>
									</view>
									<image class="img" :src="item.sliderPicUrls[0]" mode=""></image>
									<view class="item-text">
										<text>{{item.name}}</text>
									</view>
								</view>
								<view class="line-box">
									<view class="item-line">
									</view>
								</view>
							</view>
						</fui-checkbox-group>
					</view>
				</template>
			</CardComponent>
			<fui-loadmore :state="moreState"></fui-loadmore>
			<view class="submit-btn">
				<fui-button class="btn" @click="backPage" width="43vw" height="78rpx" color="var(--fui-color-primary)" plain
					borderColor="var(--fui-color-primary)" text="取消"></fui-button>
				<fui-button class="btn" width="43vw" @click="submit" height="78rpx" background="var(--fui-color-primary)"
					text="确定"></fui-button>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		computed,
		inject,
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import PageHeader from '@/components/header';
	import CardComponent from '@/components/card/normal';
	import storage from '@/utils/storage'
	import constant from '@/utils/constant'
	import goodsApi from '@/api/goods';
	const store = useStore();
	const modal = inject('$modal');

	const isRadio = ref(true) //是否单选
	const radioValue = ref('') //单选值
	const checkValue = ref([])

	// 商品列表
	const listData = ref([]);
	const selfQueryData = ref({
		pageNo: 1,
		pageSize: 10,
		tabType: 7, // 0=上架，1=下架，5=审核中，6=全部，7=可上架商品
		name: '' //查询商品名称
	});

	// 列表底部加载状态，可选值：1-上拉加载 2-正在加载... 3-没有更多了
	const moreState = ref(1);

	// 搜索
	const search = (e) => {
		listData.value = []
		selfQueryData.value.name = e.detail.value
		selfQueryData.value.pageNo = 1
		getSelfSupport();
	}

	onLoad((option) => {
		isRadio.value = option.isRadio
		getSelfSupport();
	})

	// 自营商品列表
	const getSelfSupport = () => {
		moreState.value = 2;
		modal.loading('加载中...');
		try {
			goodsApi.getProductList({
				...selfQueryData.value,
				supplierId: store.getters.companyId
			}).then((res) => {
				uni.stopPullDownRefresh(); //终止下拉刷新动作
				modal.closeLoading();
				if (res.code === 0) {
					if (selfQueryData.value.pageNo * selfQueryData.value.pageSize >= res.data.total) {
						moreState.value = 3;
					} else {
						moreState.value = 1;
					}

					listData.value = [...listData.value, ...res.data.list]
				} else {
					modal.msgError(res.msg);
				}
			});
		} catch (e) {
			modal.closeLoading();
			console.log(' getProductList===>', e);
		}
	};

	// 上拉加载更多
	onReachBottom(() => {
		if (moreState.value == 1) {
			selfQueryData.value.pageNo++;
			getSelfSupport();
		}
	});

	// 下拉刷新
	onPullDownRefresh(() => {
		listData.value = [];
		selfQueryData.value.pageNo = 1;
		getSelfSupport();
	});

	// 单选选中的值进行过滤
	const filterItem = (item) => {
		return JSON.stringify({
			id: item.id,
			name: item.name,
			categoryId: item.categoryId,
		})
	}

	// 多选选改变
	const checkChange = (e) => {
		console.log('e ===>', e);
		console.log('e.detail.value ===>', e.detail.value);
		console.log('checkValue.value ===>', checkValue.value);
	}

	// 提交表单方法
	const submit = async () => {
		// 单选
		if (isRadio.value) {
			if (radioValue.value) {
				// 暂存选中的值
				store.commit('SET_NEW_RELEASE_PRODUCT', radioValue.value)
				uni.navigateBack({
					delta: 1
				})
			} else {
				modal.msgError(res.errorMsg);
			}
		} else {
			//多选暂时没做
		}
	};
	const backPage = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang='scss' scoped>
	.page {
		min-height: 100%;
		background-color: #F8F8F8;

		&-content {
			padding-bottom: 150rpx;

			::v-deep .fui-search__bar-wrap {

				.fui-search__bar-icon {
					position: absolute;
					top: 50%;
					right: 40rpx;
					margin-top: -20rpx;

					.fui-sbi__circle {
						border-color: var(--fui-color-primary);
					}

					.fui-sbi__line {
						background-color: var(--fui-color-primary);
					}
				}

				.fui-search__bar-input {
					margin-right: 55rpx;
				}

				.fui-sbi__clear-wrap {
					display: none;
				}
			}
		}

		.card {
			width: calc(100% - 72rpx);
			margin: 0 auto;
		}


		.submit-btn {
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			width: 100%;
			z-index: 10;
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
			background-color: #fff;
			padding: 24rpx 36rpx;
		}

		.fui-list__item {
			.img {
				width: 96rpx;
				height: 90rpx;
				background: #FFFFFF;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 2rpx solid #707070;
				margin: 0 20rpx 0 22rpx;
			}

			.line-box {
				display: flex;
				justify-content: flex-end;

				.item-line {
					height: 2rpx;
					background: #DFDFDF;
					margin: 20rpx 0 30rpx;
					width: 93%;
				}
			}

			.item-row {
				display: flex;
			}

			.item-text {
				flex: 1;
				height: 100%;
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}

			.select-box {
				display: flex;
				align-items: center;
			}
		}
	}
</style>